Skip to content

fix(react-table): type column contexts with React table#6240

Open
cyphercodes wants to merge 1 commit intoTanStack:alphafrom
cyphercodes:fix/react-column-context-table-6230
Open

fix(react-table): type column contexts with React table#6240
cyphercodes wants to merge 1 commit intoTanStack:alphafrom
cyphercodes:fix/react-column-context-table-6230

Conversation

@cyphercodes
Copy link
Copy Markdown

@cyphercodes cyphercodes commented Apr 29, 2026

🎯 Changes

Fixes #6230.

  • Type React column cell, header, and footer contexts so their table prop is the React table instance and exposes helpers like table.Subscribe.
  • Re-export the React adapter's context, column definition, and table option types so ColumnDef from @tanstack/react-table uses those React-specific contexts.
  • Add a type regression test covering table.Subscribe usage from both header and cell render callbacks.

✅ Checklist

  • I have followed the steps in the Contributing guide.
  • I have tested this code locally with pnpm test:pr.

Targeted checks run instead:

  • pnpm exec prettier --check packages/react-table/src/useTable.ts packages/react-table/src/index.ts packages/react-table/tests/column-context.test-d.ts
  • pnpm --filter @tanstack/react-table test:eslint
  • pnpm --filter @tanstack/react-table test:types
  • pnpm --filter @tanstack/react-table test:lib
  • pnpm --filter @tanstack/react-table build
  • git diff --check

Summary by CodeRabbit

  • New Features

    • New TypeScript types for column definitions and table contexts with enhanced type inference capabilities
    • Explicit type exports improve developer experience and IDE autocompletion support
  • Refactor

    • Updated public API export structure to explicitly define the package surface, replacing wildcard exports with named type exports

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Apr 29, 2026

📝 Walkthrough

Walkthrough

The PR refactors react-table's public API exports to be explicit rather than wildcard, introduces a new TSelected generic parameter throughout type definitions, creates React-aware column definition types that use ReactTable in contexts, and adds compile-time type verification tests. This enables proper typing of table.Subscribe calls within cell and header renderers.

Changes

Cohort / File(s) Summary
Public API Exports
packages/react-table/src/index.ts
Changes from blanket re-export (export *) to explicit named exports of useTable value and curated TypeScript types (AccessorColumnDef, AccessorFnColumnDef, AccessorKeyColumnDef, CellContext, ColumnDef, DisplayColumnDef, GroupColumnDef, HeaderContext, ReactTable, TableOptions).
Type Definitions & Hook
packages/react-table/src/useTable.ts
Introduces TSelected generic parameter across table and column types. Adds new React-aware column definition types (DisplayColumnDef, GroupColumnDef, AccessorFnColumnDef, AccessorKeyColumnDef, AccessorColumnDef, ColumnDef) that use ColumnDefTemplate with new CellContext and HeaderContext types. Both contexts now reference ReactTable instead of Table, enabling table.Subscribe usage. Adds TableOptions<TFeatures, TData, TSelected> type. Updates useTable hook signature and ReactTable.state to support new generics.
Type Verification
packages/react-table/tests/column-context.test-d.ts
New compile-time test file verifying column context typing with globalFilteringFeature, demonstrating table.Subscribe usage in header and cell definitions.

Estimated code review effort

🎯 4 (Complex) | ⏱️ ~50 minutes

Poem

🐰 Types refined with rabbit care,
Generics flow through columns fair,
ReactTable now in context shines,
Subscribe calls cross all the lines,
API explicit, clean, and bright!

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (4 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The PR title 'fix(react-table): type column contexts with React table' clearly and concisely summarizes the main change—adding React table typing to column contexts to enable React-specific features like table.Subscribe.
Linked Issues check ✅ Passed The PR fully addresses issue #6230 by typing CellContext and HeaderContext with ReactTable, exporting these types from the React adapter, and adding a TypeScript regression test verifying table.Subscribe usage.
Out of Scope Changes check ✅ Passed All changes in the PR are directly scoped to the linked issue requirements: only column context typing, React type exports, and related column definition types are modified.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
🧪 Generate unit tests (beta)
  • Create PR with unit tests

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share
Review rate limit: 7/8 reviews remaining, refill in 7 minutes and 30 seconds.

Comment @coderabbitai help to get the list of available commands and usage tips.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🧹 Nitpick comments (1)
packages/react-table/tests/column-context.test-d.ts (1)

13-27: Consider adding a footer callback assertion for full coverage.

footer context typing is also updated in this PR; adding one compile-time usage here would prevent regressions on that path too.

Proposed test addition
 const columns: Array<ColumnDef<typeof _features, Person>> = [
   {
     accessorKey: 'name',
     header: ({ table }) =>
       table.Subscribe({
         selector: (state) => ({ globalFilter: state.globalFilter }),
         children: null,
       }),
+    footer: ({ table }) =>
+      table.Subscribe({
+        selector: (state) => ({ globalFilter: state.globalFilter }),
+        children: null,
+      }),
     cell: ({ table }) =>
       table.Subscribe({
         selector: (state) => ({ globalFilter: state.globalFilter }),
         children: null,
       }),
   },
 ]
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.

In `@packages/react-table/tests/column-context.test-d.ts` around lines 13 - 27,
Add a compile-time assertion for the footer context by adding a footer callback
to the existing ColumnDef in the test (the same columns array used for header
and cell) that calls table.Subscribe with the same selector pattern (selector:
(state) => ({ globalFilter: state.globalFilter }), children: null) so the footer
context typing is exercised; update the ColumnDef<typeof _features, Person>
entry for the 'name' column to include this footer callback to ensure the new
footer typing is covered at compile time.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Nitpick comments:
In `@packages/react-table/tests/column-context.test-d.ts`:
- Around line 13-27: Add a compile-time assertion for the footer context by
adding a footer callback to the existing ColumnDef in the test (the same columns
array used for header and cell) that calls table.Subscribe with the same
selector pattern (selector: (state) => ({ globalFilter: state.globalFilter }),
children: null) so the footer context typing is exercised; update the
ColumnDef<typeof _features, Person> entry for the 'name' column to include this
footer callback to ensure the new footer typing is covered at compile time.

ℹ️ Review info
⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 4858a4e2-ce44-4639-b473-893d17a3fd9e

📥 Commits

Reviewing files that changed from the base of the PR and between 59b3ccd and 3743868.

📒 Files selected for processing (3)
  • packages/react-table/src/index.ts
  • packages/react-table/src/useTable.ts
  • packages/react-table/tests/column-context.test-d.ts

@KevinVandy
Copy link
Copy Markdown
Member

This kind of fixes the issue, but I fear that it can get pretty messy. There are lots more table, column, footer, cell, etc. instances that would take way too many type replacements like this if we wanted to go all the way. I'm not against this PR but not sure it's the right way to go.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

HeaderContext and CellContext types should use ReactTable

2 participants